import React,{useEffect} from 'react';

import { getKindList } from '../api/kind'

import { useSelector, useDispatch } from 'react-redux'

import { changeKindList } from '../store/modules/kind'

const Kind = () => {

  const kindList = useSelector(state => state.kind.kindList)

  const dispatch = useDispatch()

  useEffect(()=>{
    getKindList().then(res => {
      // console.log(res);
      dispatch(changeKindList(res.data.data))
    })
  }, [dispatch])

  return (
    <div>
      Kind
      {kindList && kindList.map(item => {
        return (<p key={item}>{item}</p>)
      })}
    </div>
  );
};

export default Kind;
